<template>
  <div class="infobox">
    <el-form :model="form" label-width="auto" :label-position="right">
      <el-form-item label="1.性别">
        <el-radio-group v-model="form.sex">
          <el-radio value="1" size="large">男</el-radio>
          <el-radio value="2" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="2.民族">
        <el-input v-model="form.mz" placeholder="" style="width: 200px;" clearable />
      </el-form-item>

      <el-form-item label="3.医保类型(可多选)" @change="ybchange">
        <el-checkbox-group v-model="form.checkList">
          <el-checkbox label="城镇职工基本医疗保险" value="城镇职工基本医疗保险" />
          <el-checkbox label="城乡居民医疗保险" value="城乡居民医疗保险" />
          <el-checkbox label="商业医疗保险" value="商业医疗保险" />
          <el-checkbox label="新型农村合作医疗" value="新型农村合作医疗" />
          <el-checkbox label="无医疗保障老年人大病医疗保险" value="无医疗保障老年人大病医疗保险" />
          <el-checkbox label="公务员医疗保险" value="公务员医疗保险" />
          <el-checkbox label="自费" value="自费" />
          <el-checkbox label="其他" value="其他" />
        </el-checkbox-group>
        <el-input v-model="form.qt" placeholder="" style="width: 200px;" clearable :disabled="showqt" />
      </el-form-item>


      <el-form-item label="4.职业" @change="ybchangetwo">
        <el-radio-group v-model="form.zzlx">
          <el-radio value="1" size="large">在职</el-radio>
          <el-radio value="2" size="large">离退休</el-radio>
          <el-radio value="3" size="large">在校学生</el-radio>
          <el-radio value="4" size="large">无业</el-radio>
          <el-radio value="其他" size="large">其他</el-radio>
        </el-radio-group>
        <el-input v-model="form.qtzzlx" placeholder="" style="width: 200px;" clearable :disabled="showzz" />
      </el-form-item>


      <el-form-item label="5.运动习惯">
        <el-radio-group v-model="form.radio3">
          <el-radio value="1" size="large">定期运动</el-radio>
          <el-radio value="2" size="large">从不
          </el-radio>
          <el-radio value="3" size="large">偶尔
          </el-radio>
          <el-radio value="4" size="large">每周2-4天</el-radio>
          <el-radio value="4" size="large"> 每周5-7天</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="6.主要运动方式">
        <el-input v-model="form.ydfs" placeholder="" style="width: 200px;" clearable />
      </el-form-item>


      <el-form-item label="7.饮食习惯">
        <el-radio-group v-model="form.frjj">
          <el-radio value="1" size="large">规律 </el-radio>
          <el-radio value="2" size="large">不规律</el-radio>
          <el-radio value="1" size="large">嗜盐 </el-radio>
          <el-radio value="2" size="large">嗜油</el-radio>
          <el-radio value="2" size="large"> 嗜糖</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="8.吸烟史">
        <el-radio-group v-model="form.xys">
          <el-radio value="1" size="large">有 </el-radio>
          <el-radio value="2" size="large">无</el-radio>
          <el-radio value="1" size="large">已戒除 </el-radio>
          <el-radio value="2" size="large"> 每日10支以下</el-radio>
          <el-radio value="2" size="large"> 每日10支以上</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="9.饮酒史">
        <el-radio-group v-model="form.yjs">
          <el-radio value="1" size="large">有 </el-radio>
          <el-radio value="2" size="large">无</el-radio>
          <el-radio value="1" size="large">已戒除 </el-radio>

        </el-radio-group>
      </el-form-item>

      <el-form-item label="10.既往史(可多选)" @change="jwschange">
        <el-checkbox-group v-model="form.jwscheckList">
          <el-checkbox v-for="option in insuranceOptions" :key="option.id" :label="option.name" :value="option.id" />
        </el-checkbox-group>
        <div v-for="item in jwslist" :key="item.id" class="jwsclass">
          <span v-if="item.type == 'add'">
            <span>{{ item.name }}</span>
            <el-input v-model="item.add" placeholder="" style="width: 150px;" clearable /></span>
          <span v-else>{{ item.name }}</span>
          <span>-发现年份</span><el-input v-model="item.value" placeholder="" style="width: 150px;" clearable />，
        </div>
      </el-form-item>
      <el-form-item label="11.药物过敏史" @change="ywgmschange">
        <el-radio-group v-model="form.ywgms">
          <el-radio value="1" size="large">有</el-radio>
          <el-radio value="2" size="large">无</el-radio>
        </el-radio-group>
        <el-input v-model="form.ywgmsqt" placeholder="" style="width: 200px;" clearable :disabled="ywgms" />
      </el-form-item>



      <el-form-item label="12.糖尿病史" @change="tnbchange">
        <el-radio-group v-model="form.tnbshi">
          <el-radio value="1" size="large">有</el-radio>
          <el-radio value="2" size="large">无</el-radio>
        </el-radio-group>
        <el-select v-model="form.tnblx" style="width: 150px;margin-left: 20px;" :disabled="tnbtype">
          <el-option v-for="item in tnboptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span>发现年份</span><el-input v-model="form.tnbfxnf" placeholder="" style="width: 150px;" clearable
          :disabled="tnbtype" />
      </el-form-item>

      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="查看糖尿病详情" name="13" :disabled="tnbtype">
          <el-form-item label="1.当前治疗方式" @change="dqzlfschange">
            <el-checkbox-group v-model="form.dqzlfslist">
              <el-checkbox v-for="option in tnbxqList" :key="option.id" :label="option.name" :value="option.id" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="2.急性并发症" @change="jfbzchange">
            <el-checkbox-group v-model="form.jfbz">
              <el-checkbox v-for="option in jfbzlist" :key="option.id" :label="option.name" :value="option.id" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="慢性并发症" @change="mxbfchange">
            <el-checkbox-group v-model="form.mxbf">
              <el-checkbox v-for="option in mxbflist" :key="option.id" :label="option.name" :value="option.id" />
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="3.定期看诊">
            <el-radio-group v-model="form.ddkb">
              <el-radio value="1" size="large">是</el-radio>
              <el-radio value="2" size="large">否</el-radio>
            </el-radio-group>
            <span style="margin-left: 20px;">有没有每三个月检查糖化血红蛋白的习惯？</span>
          </el-form-item>


          <el-form-item label="4.规律用药">
            <el-radio-group v-model="form.glyy">
              <el-radio value="1" size="large">是</el-radio>
              <el-radio value="2" size="large">否</el-radio>
            </el-radio-group>
            <span style="margin-left: 20px;">规律用药标准：过去一个月内有没有发生过忘记吃药或自行降低、增加药量的情况</span>
          </el-form-item>

          <el-form-item label="5.血糖监测习惯">
            <el-radio-group v-model="form.xtjcxgshow">
              <el-radio value="1" size="large">有</el-radio>
              <el-radio value="2" size="large">无</el-radio>
            </el-radio-group>
            <div v-if="form.xtjcxgshow == 1" style="margin-left: 20px;">
              <span>每周</span>
              <el-input v-model="form.xtjcxg" placeholder="" style="width: 80px;" clearable />
              <span>次</span>
              <span style="margin-left: 20px;">有监测习惯标准：过去一个月内有血糖监测</span>
            </div>
          </el-form-item>
          <el-form-item label="6.血压监测习惯">
            <el-radio-group v-model="form.xyxgshow">
              <el-radio value="1" size="large">有</el-radio>
              <el-radio value="2" size="large">无</el-radio>
            </el-radio-group>
            <div v-if="form.xyxgshow == 1" style="margin-left: 20px;">
              <span>每周</span>
              <el-input v-model="form.xyxg" placeholder="" style="width: 80px;" clearable />
              <span>次</span>
              <span style="margin-left: 20px;">有监测习惯标准：过去一个月内有血糖监测</span>
            </div>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>


      <el-form-item label="13.家族史" @change="jzschange">
        <el-radio-group v-model="form.jzs">
          <el-radio value="1" size="large">有</el-radio>
          <el-radio value="2" size="large">无</el-radio>
        </el-radio-group>
        <el-input v-model="form.jzsinput" placeholder="" style="width: 200px;" clearable :disabled="jzschecktype" />
      </el-form-item>

      <!--    <el-form-item label="父亲">
        <el-checkbox-group v-model="form.fq">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="母亲">
        <el-checkbox-group v-model="form.mq">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="兄弟姐妹">
        <el-checkbox-group v-model="form.jzxdjm">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="祖父">
        <el-checkbox-group v-model="form.zf">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="祖母">
        <el-checkbox-group v-model="form.zm">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="外祖父">
        <el-checkbox-group v-model="form.wzf">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="外祖母">
        <el-checkbox-group v-model="form.wzm">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="父亲兄弟姐妹">
        <el-checkbox-group v-model="form.fqxd">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="母亲兄弟姐妹">
        <el-checkbox-group v-model="form.mqxd">
          <el-checkbox v-for="option in jzslist" :key="option.id" :label="option.name" :value="option.id"
            :disabled="jzschecktype" />
        </el-checkbox-group>
      </el-form-item> -->
      <el-form-item>
        <div class="centerbox">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
let insuranceOptions = [
  {
    "id": -1,
    "name": "以下皆无"
  },
  {
    "id": 1,
    "name": "高血压"
  },
  {
    "id": 2,
    "name": "肝部疾病(乙肝、丙肝、脂肪肝、酒精肝、肝硬化)"
  },
  {
    "id": 3,
    "name": "肾脏病"
  },
  {
    "id": 4,
    "name": "高血脂"
  },
  {
    "id": 5,
    "name": "哮喘"
  },
  {
    "id": 6,
    "name": "痛风"
  },
  {
    "id": 7,
    "name": "肺结核"
  },
  {
    "id": 8,
    "name": "甲状腺疾病"
  },
  {
    "id": 9,
    "name": "肿瘤"
  },
  {
    "id": 10,
    "name": "新增病型"
  }
]
let jzslist = [
  {
    "id": 1,
    "name": "糖尿病"
  },
  {
    "id": 2,
    "name": "高血压"
  },
  {
    "id": 3,
    "name": "心脏病"
  },
  {
    "id": 4,
    "name": "脑中风"
  },

  {
    "id": 5,
    "name": "肝病"
  },
  {
    "id": 6,
    "name": "肾病"
  },
  {
    "id": 7,
    "name": "痛风"
  },
]
let tnboptions = [
  {
    value: '1',
    label: '1型',
  },
  {
    value: '2',
    label: '2型',
  },
  {
    value: '3',
    label: '妊娠型',
  },
  {
    value: '4',
    label: '糖前型',
  },
  {
    value: '5',
    label: '特殊型',
  },
]
let tnbxqList = [
  {
    "id": 12,
    "name": "生活方式干预"
  },
  {
    "id": 13,
    "name": "口服药"
  },
  {
    "id": 14,
    "name": "胰岛素"
  },
  {
    "id": 15,
    "name": "中草药"
  },
  {
    "id": 16,
    "name": "GLP-1受体激动剂"
  },
  {
    "id": -1,
    "name": "以上皆无"
  }
]
let jfbzlist = [
  {
    "id": 17,
    "name": "酮症酸中毒"
  },
  {
    "id": 18,
    "name": "高血糖高渗状态"
  },
  {
    "id": 19,
    "name": "乳酸酸中毒"
  },
  {
    "id": 20,
    "name": "低血糖昏迷"
  },
  {
    "id": -1,
    "name": "以上皆无"
  }
]
let mxbflist = [
  {
    "id": 21,
    "name": "糖尿病肾病"
  },
  {
    "id": 22,
    "name": "糖尿病视网膜病变"
  },
  {
    "id": 23,
    "name": "糖尿病神经病变"
  },
  {
    "id": 24,
    "name": "糖尿病性下肢血管病变"
  },
  {
    "id": 25,
    "name": "糖尿病足病"
  },
  {
    "id": 26,
    "name": "心脑血管病变"
  },
  {
    "id": -1,
    "name": "以上皆无"
  }
]
let right='right'
// do not use same name with ref
const form = ref({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  checkList: []
})
let showqt = ref(true) //医保类型其他有输入框
let showzz = ref(true) //.职业类型其他有输入框

const onSubmit = () => {

}
let ybchange = (e) => {
  let hasAaa = form.value.checkList.includes('其他');
  showqt.value = !hasAaa
}
//职业类型
let ybchangetwo = (e) => {
  let hasAaa = form.value.zzlx.includes('其他');
  if (hasAaa) {
    showzz.value = !hasAaa
  } else {
    form.value.qtzzlx = ''
    showzz.value = true
  }
}
//既往史(可多选)
let jwslist = ref()
let jwschange = () => {
  let one = form.value.jwscheckList.includes(-1); //以下全无
  let two = form.value.jwscheckList.includes(10); //新增病例
  if (one) {
    jwslist.value = []
    form.value.jwscheckList = [-1]
  } else {
    let selectedIds = form.value.jwscheckList;
    let selectedOptions = insuranceOptions
      .filter(option => selectedIds.includes(option.id))
      .map(option => ({
        name: option.name,
        value: '',
        id: option.id
      }));
    // 找到 id 为 1 的对象
    let hypertensionOption = selectedOptions.find(option => option.id === 10);
    if (hypertensionOption) {
      // 生成新的高血压对象
      let newHypertensionOptions = Array.from({ length: 5 }, (_, index) => ({
        name: `${hypertensionOption.name}${index + 1}`,
        value: '',
        id: 50 + index,
        type: 'add'
      }));
      // 将新的高血压对象插入到结果数组中
      selectedOptions = selectedOptions.map(option => {
        if (option.id === 10) {
          return newHypertensionOptions[0];
        }
        return option;
      }).concat(newHypertensionOptions.slice(1));
    }
    jwslist.value = selectedOptions
  }
}
//药物过敏史
let ywgms = ref(true)
let ywgmschange = () => {
  let hasAaa = form.value.ywgms.includes(1);
  if (hasAaa) {
    ywgms.value = !hasAaa
  } else {
    form.value.ywgmsqt = ''
    ywgms.value = true
  }
}
//家族史
let jzschecktype = ref(true)
let jzschange = () => {
  console.log("1111111111111111", form.value.jzs)
  if (form.value.jzs == 1) {
    jzschecktype.value = false
  } else {
    form.value.jzsinput = ''
    jzschecktype.value = true
  }
  // if (form.value.jzs.length > 0) {
  //   jzschecktype.value = true
  //   form.value.fq = []
  //   form.value.mq = []
  //   form.value.mqxd = []
  //   form.value.zf = []
  //   form.value.zm = []
  //   form.value.wzf = []
  //   form.value.wzm = []
  //   form.value.fqxd = []
  //   form.value.mqxd = []
  // } else {
  //   jzschecktype.value = false
  // }
}
//糖尿病史
let tnbtype = ref(false)
let tnbchange = () => {
  let hasAaa = form.value.tnbshi.includes(1);
  if (hasAaa) {
    tnbtype.value = false
  } else {
    form.value.tnblx = ''
    form.value.tnbfxnf = ''
    tnbtype.value = true
  }
}

const activeNames = ref([])
const handleChange = (val) => {
  console.log(val)
}

//当前治疗方式
let dqzlfschange = () => {
  let one = form.value.dqzlfslist.includes(-1); //以下全无
  if (one) {
    form.value.dqzlfslist = [-1]
  }
}
//急性并发症
let jfbzchange = () => {
  let one = form.value.jfbz.includes(-1); //以下全无
  if (one) {
    form.value.jfbz = [-1]
  }
}
//慢性并发症

let mxbfchange = () => {
  let one = form.value.mxbf.includes(-1); //以下全无
  if (one) {
    form.value.mxbf = [-1]
  }
}




</script>
<style lang='scss' scoped>
.infobox {
  height: 400px;
  overflow: auto;
}

.jwsclass {
  margin: 10px;
}
.centerbox{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>